<script setup lang="ts">
import type { ActionButton } from '@/components/table/src/types/action-button';

const props = defineProps<{
  actionButtons: ActionButton[];
}>();

const displayedButtons = computed(() => {
  return props.actionButtons.filter(button => {
    return button.display ?? true;
  });
});

function handleClick(button: ActionButton) {
  button.onClick();
}
</script>

<template>
  <NSpace :size="6" justify="center">
    <NButton
      v-for="button of displayedButtons"
      :key="button.key"
      :size="button.size"
      :type="button.type"
      :secondary="button.secondary"
      :dashed="button.dashed"
      :ghost="button.ghost"
      :tertiary="button.tertiary"
      :text="button.text"
      :disabled="button.disabled"
      @click="handleClick(button)"
    >
      <template #icon>
        <NIcon :component="button.icon" />
      </template>
      {{ button.name }}
    </NButton>
  </NSpace>
</template>
